<template>
    <div>
        <Button type="primary" class="ivu-mb-16" @click="handleAdd">新增关联</Button>
        <Table highlight-row :columns="columns" :loading="loading" :data="list" border>
            <template slot="action" slot-scope="{row,index}">
                <a @click="handleEdit(index)">{{row.action[0]}}</a>
                <Divider type="vertical" />
                <a @click="handleDetele(index)">{{row.action[1]}}</a>
            </template>
        </Table>
        <Modal :loading="creating" @on-ok="handleCreate" :title="addEdit? '新增关联':'编辑关联'" width="600" v-model="createModal">
            <Form ref="create" :rules="createRules" :model="formData" :label-width="100">
                <FormItem label="模块名称:" prop="name">
                    <Select v-model="formData.name">
                        <Option v-for="item in modularList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述:">
                    <Input type="textarea" v-model="formData.describe" placeholder="请输入描述" :rows="3" />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            createModal: false,
            addEdit: true,
            updateIndex: -1,
            creating: true,
            formData: {
                name: '',
                describe: ''
            },
            createRules: {
                name: [
                    {
                        required: true,
                        message: '请选择名称',
                        trigger: 'blur'
                    }
                ]
            },
            modularList: [
                {
                    value: '客户',
                    label: '客户'
                },
                {
                    value: '回访',
                    label: '回访'
                },
                {
                    value: '联系人',
                    label: '联系人'
                }
            ],
            columns: [
                {
                    title: '模块名称',
                    key: 'name',
                    width: 118
                },
                {
                    title: '描述',
                    key: 'describe'
                },
                {
                    title: '操作',
                    key: 'action',
                    slot: 'action',
                    width: 150
                }
            ],
            list: []
        }
    },
    methods: {
        mockData() {
            const item = {}
            item.name = '回访'
            item.describe = '模块描述' + Math.floor(Math.random() * 100)
            item.action = ['编辑', '删除关联']
            return item
        },
        getData() {
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 10; i++) {
                    data.push(this.mockData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleAdd() {
            this.updateIndex = -1
            this.formData.name = ''
            this.formData.describe = ''
            this.createModal = true
        },
        // 新增数据
        handleCreate() {
            this.$refs.create.validate(valid => {
                if (valid) {
                    if (this.updateIndex < 0) {
                        const mockData = this.mockData()
                        mockData.name = this.formData.name
                        mockData.describe = this.formData.describe
                        this.list.splice(0, 0, mockData)
                        this.$Message.success('新增成功')
                    } else {
                        this.list[this.updateIndex].name = this.formData.name
                        this.list[
                            this.updateIndex
                        ].describe = this.formData.describe
                        this.$Message.success('编辑成功')
                    }
                    this.createModal = false
                    this.creating = false
                    this.$nextTick(() => {
                        this.creating = true
                    })
                } else {
                    this.creating = false
                    this.$nextTick(() => {
                        this.creating = true
                    })
                }
            })
        },
        handleEdit(index) {
            this.addEdit = false
            this.updateIndex = index
            const item = this.list[index]
            this.formData.name = item.name
            this.formData.describe = item.describe
            this.createModal = true
        },
        handleDetele(index) {
            this.$Modal.confirm({
                title: '删除提示',
                content: '是否确认删除此模块关联',
                onOk: () => {
                    this.list.splice(index, 1)
                }
            })
        }
    },
    mounted() {
        this.getData()
    }
}
</script>